<template>
	<view class="prize_detail">
		<view class="tabs">
			<view :class="{ active: type == '1' }" @click="selectEvt('1')">图文介绍</view>
			<view :class="{ active: type == '2' }" @click="selectEvt('2')">奖品详情</view>
		</view>
		<view v-show="type == '1'" class="content">

			<image v-for="(d,index) in photoList" :key="index" class="w" :src="domain+d"></image>

		</view>
		<view v-html="introduce_text" v-show="type == '2'" class="content">

		</view>
	</view>
</template>
<script>
	export default {
		props: ["introduce_photo", "introduce_text"],
		data() {
			return {
				type: '1',
				domain: uni.$http.baseUrl + "/"
			}
		},
		computed: {
			photoList: function() {
				if (typeof(this.introduce_photo) === "string") {
					return [this.introduce_photo]
				} else {
					return this.introduce_photo
				}
			}
		},
		methods: {
			selectEvt(value) {
				this.type = value;
			}
		},
		mounted() {

		}
	}
</script>
<style lang="scss" scoped>
	.prize_detail {
		background-color: #fff;

		.tabs {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			background-color: #fff;
			padding: 10rpx 20rpx 0;
			font-size: 28rpx;

			&>view {
				width: 50%;
				text-align: center;
			}

			.active {
				font-weight: bold;

				&::after {
					content: '';
					display: block;
					width: 200rpx;
					height: 6rpx;
					background-color: #367DFB;
					margin-left: 50%;
					margin-top: 10rpx;
					transform: translateX(-50%);

				}
			}

		}

		.content {
			padding: 30rpx;
		}
	}
</style>